<!DOCTYPE>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>创建公告</title>
    <link rel="stylesheet" href="${rc.contextPath}/static/lib/layui/css/layui.css"  media="all">
    <link rel="stylesheet" href="${rc.contextPath}/static/plugin/layer/skin/layer.css">
    <style type="text/css">
        body{padding-top:10px;}
        .fl{float:left;}
        .fr{float:right;}
        .por{position: relative;}
        .clearfix:after{content:'';display:block;height:0;visibility:hidden;clear:both;}
        .clearfix{zoom:1;}
        #pagination{margin:0 20px;}
        .layui-form{margin:0 20px;}
        .update input{position: absolute;height:36px;width:100px;z-index:3;opacity: .01;cursor: pointer;}
        .update span{color:#5FB878;position: absolute;left:0;top:0;width: 110px;height:36px;text-align:center;line-height:36px;border:1px solid #ddd;border-bottom-right-radius: 2px;border-top-right-radius:2px;font-size:14px;}
        .update i{color:#000;font-style: normal;font-size:16px;}
        .layui-form-item .layui-input-inline{width:auto;}
        /*通知对象样式*/

        form{padding-bottom:20px;}
        .tableWrap{padding:0 20px;}
        table{width:100%;}
        table td,table th{border:1px solid #ccc;height:40px;text-align: center;}
        table th{background: #eee;}
        table tr:hover{background: #eee;cursor:pointer;}
        .checkbox{position: relative;width:100px;height:40px;padding-left:32px;}
        .checkbox input{position: absolute;left:50%;top:0;width:50px;height:32px;opacity:.01;z-index:2;cursor:pointer;transform: translateX(-50%);}
        .checkbox input:hover+i.checkboxIcon{border:1px solid #5FB878;}
        .checkbox i.checkedColor{color:#fff;border:1px solid #5FB878;background: #5FB878;}
        /*table td ,table th{border:1px solid #bbb;padding:0 5px;font-size:14px;}*/
        .checkbox i.checkboxIcon{position: absolute;width:22px;height:22px;line-height:22px;text-align:center; text-indent: -8px;border:1px solid #ddd;top:50%;left:50%;transform: translate(-50%,-50%);z-index:1;font-size:16px;color:#ddd;}
        #layui-layer1{top:50px !important;}
        .x-red{color:red;}
    </style>
</head>
<body>
<div id="editRoleApp">
    <div>
        <fieldset class="layui-elem-field layui-field-title" >
            <legend>角色</legend>
        </fieldset>
        <form>
            <input type="hidden" name="id" id="id"    autocomplete="off" class="layui-input">
            <input type="hidden" name="status" id="status"    autocomplete="off" class="layui-input">
            <input type="hidden" name="createTime" id="createTime"    autocomplete="off" class="layui-input">
            <input type="hidden" name="updateTime" id="updateTime"    autocomplete="off" class="layui-input">
            <div class="layui-form-item">
                <label class="layui-form-label">角色名</label>
                <div class="layui-input-inline" >
                    <input type="text" name="roleName" v-model="parameter.roleName"   autocomplete="off" class="layui-input" placeholder="请输入角色名" >
                </div>
                <span class="x-red">*必填</span>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">角色描述</label>
                <div class="layui-input-inline">
                    <input type="text" name="roleDescription" v-model="parameter.roleDescription" lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="tableWrap">
                <table class="" border="0" cellspacing="0" cellpadding="0">
                    <thead>
                    <tr>
                        <th width="50%">资源名称</th>
                        <th width="50%"> 显示</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(item,index) in editRoleLists" v-show=" (item.parentAuthId ==0) ? true : item.showSubDept"   :key="index">
                        <td @click="deptShow(item)">
                            <i class="layui-icon " v-show="item.parentAuthId ==0" style="margin-right:10px; color:#FFE793;font-size:20px;">&#xe622;</i>
                            <i class="layui-icon " v-show="item.showSubDept || !(item.parentAuthId == 0)"  style="margin-right:10px; padding-left:20px;font-size:20px;">&#xe621;</i>
                            {{item.menuName}}
                        </td>
                        <td  class="por checkbox" >
                            <input  type="checkbox" @click="selectRole(item)" :checked="item.checkedFlag">
                            <i class="layui-icon checkboxIcon" :class="{checkedColor:item.checkedFlag}">&#xe618;</i>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </form>
        <div class="layui-form-item">
            <label  class="layui-form-label"></label><button class="layui-btn" lay-filter="demo2" @click="sub">提交</button>
        </div>
    </div>
</div>
<script src="../static/lib/jquery.min.js"></script>
<script src="../static/lib/layui/layui.js" charset="utf-8"></script>
<script src="../static/lib/vue.min.js"></script>
<script src="../static/lib/x-layui.js"></script>
<script type="text/javascript">
    var id='$!{tbSysRoles.pkRoleId}';
    var VM = new Vue({
        el:"#editRoleApp",
        created:function(){
            this.getRoleLists();
        },
        data:{
            editRoleLists:[],
            editMyRoleLists:[],
            myRole:[],
            parameter:{
                roleName:'$!{tbSysRoles.roleName}',//和后台对照
                roleDescription:'$!{tbSysRoles.roleDescription}',//和后台对照
                pkRoleId:'$!{tbSysRoles.pkRoleId}',//和后台对照
                createTime:"$!{tbSysRoles.createTime}",
                updateTime:"$!{tbSysRoles.updateTime}",
                updateUser:"$!{tbSysRoles.updateUser}",
                createUser:"$!{tbSysRoles.createUser}",
                roles:''
            }
        },
        methods:{
            getRoleLists:function(){
                var _this = this;
                $.ajax({
                    type:"post",
                    url:'${rc.contextPath}/role/info.do?pkRoleId='+id,
                    dataType:"json",
                    success:function(res){
                        console.log(res);
                        _this.editRoleLists = res.result.all;
                        _this.editMyRoleLists = res.result.some;
                        console.log(_this.editRoleLists);
                        console.log(_this.editMyRoleLists);
                        _this.editRoleLists.forEach(function (item,index) {
                            _this.editMyRoleLists.forEach(function(v,i){
                                if(v){
                                    if(item.pkMenuId == v.pkMenuId){

                                        if(typeof item.checkedFlag == 'undefined'){
                                            Vue.set(item,"checkedFlag",true);
                                        }else{
                                            item.checkedFlag = !item.checkedFlag;
                                        }
                                    }
                                }
                            });
                        });

                    }
                })
            },
            selectRole:function (item) {
                if(typeof item.checkedFlag == "undefined"){
                    Vue.set(item,"checkedFlag",true);
                }else{
                    item.checkedFlag = !item.checkedFlag;
                }
            },
            sub:function(){
                //数组去重
                Array.prototype.unique = function(){
                    var res = [];
                    var json = {};
                    for(var i = 0; i < this.length; i++){
                        if(!json[this[i]]){
                            res.push(this[i]);
                            json[this[i]] = 1;
                        }
                    }
                    return res;
                }
                var _this = this;
                _this.myRole = [];
                this.editRoleLists.forEach(function(item,index){
                    if(item.checkedFlag == true){
                        _this.myRole.push(item.pkMenuId);
                        if(!(item.parentAuthId == 0)){
                            _this.myRole.push(item.parentAuthId);
                        }

                    }
                });

                _this.myRole = _this.myRole.unique();
                console.log(_this.myRole);

//                return false;
                this.parameter.roles = _this.myRole.join(",");
                console.log(_this.parameter.myRole);
              //  return false;
//                //提交接口
                $.ajax({
                    type:"post",
                    url:'../role/saveOrUpdate.do',
                    data:_this.parameter,
                    dataType:"json",
                    success:function(data){
                        //关闭窗口
                        layer.alert("添加成功");
                        var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                        parent.layer.close(index);
                        parent.window.location.reload();
                        window.location.href = "javascript:location.replace(location.href)";

                    }
                })
            },

            deptShow:function (item) {
                this.editRoleLists.forEach(function(dept,i){
                    if(dept.parentAuthId == item.pkMenuId){
                        var pid = dept.parentAuthId;
                        console.log(dept.parentAuthId);
                        if(typeof dept.showSubDept == "undefined"){
                            Vue.set(dept,"showSubDept",true);
                        }else{
                            dept.showSubDept = !dept.showSubDept;
                        }
                    }
                });
                console.log(item.showSubDept)
            }
        }
    });//vue 实例结束




    layui.use(['layer',"form",'laydate','upload'], function(){
        var _this = this;
        var form = layui.form(),
                layer = layui.layer,
                laydate = layui.laydate;

        form.on('checkbox(allChoose)', function(data){
            var child = $(data.elem).parents('table').find('tbody input.checkbox');
            child.each(function(index, item){
                item.checked = data.elem.checked;
            });
            form.render('checkbox');
        });




    });
</script>
</body>
</html>